<template>
	<div class="user-page">
		<!--查询表单-->
		<el-card class="box-card mb10" shadow="never">
			<el-form ref="searchFormRef" class="search-form" :inline="true" label-position="left" label-width="100px" :model="searchForm">
				<el-row :gutter="30" justify="start">
					<el-col :span="6">
						<el-form-item class="form-item" label="单位名称:" prop="deptName">
							<el-input v-model="searchForm.deptName" placeholder="请输入单位名称" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item class="form-item" label="单位简称:" prop="shortName">
							<el-input v-model="searchForm.shortName" placeholder="请输入单位简称" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item class="form-item" label="单位类型:" prop="deptFlag">
							<dict-select v-model="searchForm.deptFlag" :dictKey="'dept_flag'" placeholder="请选择单位类型" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<div class="search-btn">
							<el-button type="primary" @click="handleSearch">查询</el-button>
							<el-button @click="handleReset">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<el-card class="box-card" shadow="never">
			<static-table :tableData="tableData" :loading="loading" rowId="deptId" :treeConfig="{ rowField: 'deptId', parentField: 'parentId', transform: true, iconOpen: 'vxe-icon-square-minus', iconClose: 'vxe-icon-square-plus', trigger: 'cell' }">
				<template #vux-search>
					<el-row :gutter="12" class="mb10">
						<el-button class="ml8" type="primary" v-has="'system:dept:add'" @click="handleAddExtends">
							<el-icon><ele-Plus /></el-icon>
							&nbsp;新增
						</el-button>
					</el-row>
				</template>
				<template #vux-column>
					<vxe-column align="left" field="deptName" min-width="150" show-overflow="tooltip" tree-node title="单位名称" />
					<vxe-column field="shortName" min-width="150" show-overflow="tooltip" title="单位简称" />
					<vxe-column field="deptFlag" min-width="150" show-overflow="tooltip" :formatter="formatterType" title="单位类型" />
					<vxe-column field="leader" min-width="150" show-overflow="tooltip" title="负责人" />
					<vxe-column field="phone" min-width="120" show-overflow="tooltip" title="联系电话" />
					<vxe-column field="status" min-width="120" title="状态">
						<template #default="{ row }">
							<span style="margin-right: 10px">{{ row.status == '0' ? '正常' : '停用' }}</span>
							<el-switch active-color="#00B42A" inactive-color="#F04141" v-has="'system:dept:update'" :model-value="row.status == '0' ? true : false" @change="handleSwitch(row)" />
						</template>
					</vxe-column>
					<vxe-column field="createTime" min-width="120" show-overflow="tooltip" title="创建时间" />
					<vxe-column field="operation" fixed="right" min-width="120" title="操作">
						<template #default="{ row }">
							<div class="vxe-action">
								<a @click="handleUpdateExtends(row)" v-has="'system:dept:update'">修改</a>
								<a @click="handleAddChild(row)" v-has="'system:dept:add'">新增</a>
								<a @click="handleDelete(row)" v-has="'system:dept:delete'">删除</a>
							</div>
						</template>
					</vxe-column>
				</template>
			</static-table>
		</el-card>
		<EditDeptModal ref="editModalRef" :treeData="tableData" @peak-modal-ok="handleSearch" />
	</div>
</template>
<script name="DeptManage" setup>
import global from '@/utils/global'
import useModal from '@/hooks/useModal'
const EditDeptModal = defineAsyncComponent(() => import('./leafPages/EditDeptModal.vue'))
import { getDictKeyText } from '@/utils/tools'
/*
 *@Description: 状态初始化
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-08-28 10:11:35
 */

const state = reactive({
	searchForm: {
		deptName: '',
		shortName: '',
		deptFlag: '',
	},
	createTimeAry: [],
	tableData: [],
	loading: false,
	searchFormRef: null,
})
const { searchForm, tableData, loading, searchFormRef } = toRefs(state)

onMounted(() => {
	handleSearch()
})

const handleInitQuery = () => {
	state.loading = true
	global.$fetchPostData(`/meta-system/web/v1/sysDept/list`, state.searchForm).then(data => {
		if (data.code == 200) {
			state.loading = false
			state.tableData = data.data
		} else {
			global.$baseMessage(data.msg, 'error')
		}
	})
}

const { editModalRef, handleUpdate } = useModal()

/*
 *@Description: 方法模块
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-08-28 10:16:03
 */
const handleAddExtends = () => {
	handleUpdate({
		flag: 'add',
	})
}
const handleUpdateExtends = row => {
	handleUpdate({
		flag: 'update',
		...row,
	})
}
const handleAddChild = row => {
	handleUpdate({
		flag: 'child',
		...row,
	})
}
const handleSearch = () => {
	handleInitQuery()
}
const handleReset = () => {
	state.searchFormRef.resetFields()
	state.createTimeAry = []
	handleInitQuery()
}
const handleDelete = row => {
	global.$baseConfirm(
		row ? `是否确认删除名称为"--【${row.deptName}】--"的数据?` : '是否确认删除当前选中的数据？',
		'提示',
		() => {
			global.$fetchPostData(`/meta-system/web/v1/sysDept/delDeptById`, { idLong: row.deptId }).then(data => {
				if (data.code == 200) {
					global.$baseMessage(data.msg, 'success')
					handleSearch()
				} else {
					global.$baseMessage(data.msg, 'error')
				}
			})
		},
		() => {}
	)
}
const formatterType = ({ cellValue }) => {
	return getDictKeyText('dept_flag', cellValue)
}
const handleSwitch = row => {
	global.$baseConfirm(`是否确认更改名称为"--【${row.deptName}】--"的状态?`, '提示', () => {
		const user = {}
		user.status = row.status == 0 ? 1 : 0
		user.id = row.deptId
		global.$fetchPostData(`/meta-system/web/v1/sysDept/status`, user).then(data => {
			if (data.code == 200) {
				global.$baseMessage(data.msg, 'success')
				handleSearch()
			} else {
				global.$baseMessage(data.msg, 'error')
			}
		})
	})
}
</script>
<style lang="scss" scoped></style>
